<template>
  <div class="">
    <el-select v-model="value1" placeholder="按项目筛选" @change="chooseType">
      <el-option
        v-for="item in type"
        :key="item.type"
        :label="`${item.type}-${item.name}`"
        :value="item.type">
      </el-option>
    </el-select>
    <el-select v-model="value2" placeholder="按组筛选" @change="chooseGroup">
      <el-option
        v-for="item in groups"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
    <el-button
        class="transfer-footer"
        slot="right-footer"
        size="small"
        @click="clear(index)"
        >重置</el-button
      >
    <el-transfer
      style="text-align: left; display: inline-block"
      ref="myTransfer"
      v-model="selectValue"
      :titles="['选择', '排序']"
      :props="{
        key: 'id',
        label: 'projectName',
      }"
      filterable
      :filter-method="filterMethod"
      :data="applyList"
      target-order="push"
      @right-check-change="choose"
    >
    <span slot-scope="{option}">
      {{ option.projectName }}-{{ option.type }}-{{ option.groups }}-{{ option.createBy }}
      <div>
        运动员：<div style="display: inline-block;margin-right: 5px;" v-for="item in option.athletes">{{ item.name }}</div>
      </div>
    </span>
    <div
      class="transfer-footer"
      slot="left-footer"
      size="small"
      >
    </div>
      <el-button
        class="transfer-footer"
        slot="right-footer"
        size="small"
        @click="handleUp(index)"
        >上移</el-button
      >
      <el-button
        class="transfer-footer"
        slot="right-footer"
        size="small"
        @click="handleDown(index)"
        >下移</el-button
      >
    </el-transfer>
  </div>
</template>

<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>

<script>
  export default {
    data() {
      return {
      value1:'',
      value2:'',
      type:[
        {
          id: "2",
          competitionId: "1",
          name: "生存赛",
          type: "绝地求生",
          athleteSumMin: 5,
          athleteSumMax: 10,
          entryPrice: 100,
          createBy: null,
          createTime: null,
          updateBy: "系统管理员",
          updateTime: "2023-04-25 10:55:44",
          sort: null
        },
        {
          id: "3",
          competitionId: "1",
          name: "2023青铜段位排位赛",
          type: "英雄联盟",
          athleteSumMin: 5,
          athleteSumMax: 63,
          entryPrice: 21,
          createBy: null,
          createTime: null,
          updateBy: "系统管理员",
          updateTime: "2023-04-25 09:46:21",
          sort: null
        }
      ],
      groups:[
        "青年组",
        "少儿组",
        "成年组"
      ],
      selectValue: [],
      //右侧列表排序
      sort: "",
      //右侧列表被选中内容
      item: "",
      // 右侧列表被选中下标值
      index: "",
      //报名信息
      applyList: [
          {
            id: '168282391434361',
            applyId: '168282391414444',
            competitionId: '1',
            projectId: '2',
            athleteIds: ['168217488193657','168217448257872'],
            type: '绝地求生',
            groups: '成年组',
            cost: 200,
            status: '',
            createBy: '队伍甲',
            createTime: '2023-04-30 11:05:14',
            updateBy: '系统管理员',
            updateTime: '2023-05-05 10:36:08',
            sort: '1682823914344',
            athletes: [
              {
                name: '库里',
                tel: '18355555555',
                idCard: '370888888888888888',
                sex: '1',
                age: null
              },
              {
                name: '史蒂芬',
                tel: '18365431234',
                idCard: '370283199900001111',
                sex: '1',
                age: null
              },
              {
                name: '史蒂芬',
                tel: '18365431234',
                idCard: '370283199900001111',
                sex: '1',
                age: null
              },
              {
                name: '史蒂芬',
                tel: '18365431234',
                idCard: '370283199900001111',
                sex: '1',
                age: null
              }
            ],
            fileMusicUrl: '/work/file/D://upload/pic/20230430/logo.jpg',
            fileMusicName: 'logo.jpg',
            projectName: '生存赛',
            fileId: '16828249489324'
          },
          {
            id: '168282391453940',
            applyId: '168282391414444',
            competitionId: '1',
            projectId: '3',
            athleteIds: ['168217540918645','168217488193657'],
            type: '英雄联盟',
            groups: '少儿组',
            cost: 42,
            status: '',
            createBy: '队伍甲',
            createTime: '2023-04-30 11:05:15',
            updateBy: '系统管理员',
            updateTime: '2023-05-05 10:36:09',
            sort: '1682823914539',
            athletes: [
              {
                name: '迈克尔',
                tel: '18333333333',
                idCard: '111111111111111111',
                sex: '1',
                age: null
              },
              {
                name: '库里',
                tel: '18355555555',
                idCard: '370888888888888888',
                sex: '1',
                age: null
              }
            ],
            fileMusicUrl: '/work/file/D://upload/pic/20230506/666.mp3',
            fileMusicName: '666.mp3',
            projectName: '2023青铜段位排位赛',
            fileId: '168333761399438'
          },
          {
            id: '168282391473080',
            applyId: '168282391414444',
            competitionId: '1',
            projectId: '3',
            athleteIds: ['16821730073556','16821729436752'],
            type: '英雄联盟',
            groups: '成年组',
            cost: 42,
            status: '',
            createBy: '队伍甲',
            createTime: '2023-04-30 11:05:15',
            updateBy: '系统管理员',
            updateTime: '2023-05-05 10:36:08',
            sort: '1682823914730',
            athletes: [
              {
                name: '勒布朗',
                tel: '18366666666',
                idCard: '370283199999999999',
                sex: '1',
                age: null
              },
              {
                name: '詹姆斯',
                tel: '18354222589',
                idCard: '370283199201010101',
                sex: '1',
                age: null
              }
            ],
            fileMusicUrl: null,
            fileMusicName: null,
            projectName: '2023青铜段位排位赛',
            fileId: null
          }
        ],
      };
    },
    methods: {
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      },
      filterMethod(query, item) {
        return (item.type.indexOf(query) > -1 || item.groups.indexOf(query) > -1)
      },
    //右侧选中
    choose(value) {
      this.item = value;
    },
    chooseType(value) {
      this.$refs.myTransfer.$children[0].query = value
      this.value2 = ''
    },
    chooseGroup(value) {
      this.value1 = ''
      this.$refs.myTransfer.$children[0].query = value
    },
    clear() {
      this.$refs.myTransfer.$children[0].query = ''
      this.value1 = ''
      this.value2 = ''
    },
      //上移事件
    handleUp(item, index) {
      let self = this;
      item = self.item;
      if (item.length == 1) {
        self.selectValue.find((val, indexs, arr) => {
          if (val == item) {
            index = indexs;
          }
        });
        if (index == 0) {
          self.$message("没有上移的空间了");
          return;
        }
        //改变的数组
        let changeItem = JSON.parse(
          JSON.stringify(self.selectValue[index - 1])
        );
        console.log(33, changeItem);
        self.selectValue.splice(index - 1, 1);
        self.selectValue.splice(index, 0, changeItem);
      } else {
        self.$message.error("只能选择一条数据进行上下移动");
        return;
      }
    },
    //下移事件
    handleDown(item, index) {
      let self = this;
      item = self.item;
      if (item.length == 1) {
        //选中值的下标
        self.selectValue.find((val, indexs, arr) => {
          if (val == item) {
            index = indexs;
          }
        });
        if (index == self.selectValue.length - 1) {
          // 这里是length-1,因为下标值从0开始
          self.$message("没有下移的空间了");
          return;
        }
        let changeItem = JSON.parse(JSON.stringify(self.selectValue[index]));
        self.selectValue.splice(index, 1);
        self.selectValue.splice(index + 1, 0, changeItem);
      } else {
        self.$message.error("只能选择一条数据进行上下移动");
        return;
      }
    },
    }
  };
</script>
<style>
.el-checkbox {
  height: 60px;
  color: #606266;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin-right: 30px;
}
.el-transfer-panel {
    width: 400px;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    overflow: hidden;
    background: #FFF;
    display: inline-block;
    vertical-align: middle;
    /* width: 200px; */
    max-height: 100%;
    box-sizing: border-box;
    position: relative;
}
</style>